<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body {
				height:100%;
				background-color:#F7F8FA;
				/*overflow-y: auto;
				-webkit-overflow-scrolling:touch;*/
			}

			.vehicle_time{ background-color:#fff; padding: 5px 15px 15px;}
			.vehicle_time b{ display:block; font-size: 15px; color: #333; font-weight: 500; line-height: 35px;}
			.vehicle_time p{ position: relative; font-size: 15px; color: #333; line-height: 30px; padding-left: 25px;}
			.vehicle_time p:first-child{ margin-bottom: 6px;}
			.vehicle_time p img{ position: absolute; left: 0; top: 50%; margin-top: -9px; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 10px; color: #fff; background-color: #3bcb9f; border-radius: 50%;}
			.vehicle_time p em{ position:absolute; left: 8px; top: 28px; border-right: 1px #e0e0e0 solid; height: 10px;}
			.vehicle_time b span{float:right;font-size:12px;color:#3262F1;font-weight:normal;}
			
			.vehicle_info{ background-color: #fff; padding: 10px 15px 0; overflow: hidden;}
			.vehicle_info li{ height: 50px; font-size: 15px; color: #202532; line-height: 50px; position: relative;}
			.vehicle_info li::after{ position:absolute; content: ""; left: 0; right: -10px; bottom: 0; border-bottom: 1px #f0f1f3 solid; transform: scaleY(0.5);}
			.vehicle_info b{ float:left; font-size: 16px; font-weight: 400;}
			.vehicle_info p{ float:right; font-size:14px; color:#333;}
			.vehicle_time01{ padding-top:15px; }
			
			.identit_info{ padding: 50px 15px 42px; background-color: #fff;}
			.identit_info b{ display:block; font-size: 14px; color: #403D3D; font-weight: 500; line-height: 50px;}
			.identit_info li{ float: left; width: 48.5%; overflow: hidden; margin-bottom: 10px; background-color:#f9f9f9;}
			.identit_info li:nth-child(2n){ float: right;}
			.identit_info img{ width: 100%; border-radius: 4px; height:106px; object-fit: cover;}
			.identit_info .loadimg { width:16px; height:16px; margin:45px auto; vertical-align: middle;}
			.identit_info01{ margin-top: 10px; padding-top: 0; padding-bottom: 10px;}
			
			.identit_info02{ margin-top: 0px; padding-top: 0; padding-bottom: 10px;}
			
			.vehicle_state{ background: url(../../image/insurebg1.png) no-repeat 0 0; background-size: 100% 160px; position: relative; padding: 22px 15px 0;  color: #fff;background-color: #fff;}
			
			.vehicle_state .m_cell_hd img{ width: 36px; margin-right: 10px;}
			.vehicle_state .m_cell_hd h4{ display:block; font-size: 15px; line-height: 20px;}
			.vehicle_state .m_cell_hd p{ font-size: 12px; opacity: 0.7; line-height: 20px;}
			.vehicle_state .info{ margin-top: 15px; padding: 10px 0 10px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.07); min-height: 60px;}
			
			.vehicle_state .info b{ display: block; padding: 0 15px; font-size: 15px; color: #333; line-height: 35px;}
			.vehicle_state .info i{ color:#3bcb9f;}
			.vehicle_state .info i.on{ color:#333;}
			
			.vehicle_state .info .baoxian_list{ width: 100%; font-size: 14px; color: #333; text-align: center; padding-bottom: 10px;}
			.vehicle_state .info .baoxian_list li{ line-height: 35px; height: 35px; overflow: hidden;}
			.vehicle_state .info .baoxian_list div{ float: left; width: 33.33%; text-align: center; overflow: hidden; height: 35px;}
			.vehicle_state .info .baoxian_list li:nth-child(1){ font-size:12px; color: #9F9F9F; }
			
			.vehicle_state02 .info .baoxian_list li,.vehicle_state05 .info .baoxian_list li{ position: relative; line-height: 35px; height: 35px; overflow: hidden;}
			.vehicle_state02 .info .baoxian_list div,.vehicle_state05 .info .baoxian_list div{ float: left; width: 33.33%; text-align: center; overflow: hidden; height: 35px;}
			.vehicle_state02 .info .baoxian_list li:nth-child(1),.vehicle_state05 .info .baoxian_list li:nth-child(1){ font-size:12px; color: #9F9F9F; }
			.vehicle_state02 .info .baoxian_list li:nth-last-child(2),.vehicle_state05 .info .baoxian_list li:nth-last-child(2){ height: 48px; line-height:40px; }
			.vehicle_state02 .info .baoxian_list li:nth-last-child(2)::after{ display:block; position: absolute; content: ""; left: 15px; right: 15px; bottom: 0; height: 1px; background-color: #ededed; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
			.vehicle_state02 .info .baoxian_list li:last-child{ font-size:15px; padding:0 15px; line-height: 45px; }
			.vehicle_state05 .info .baoxian_list li:nth-last-child(2)::after{ display:block; position: absolute; content: ""; left: 15px; right: 15px; bottom: 0; height: 1px; background-color: #ededed; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
			.vehicle_state05 .info .baoxian_list li:last-child{ font-size:15px; padding:0 15px; line-height: 45px; }
			
			.vehicle_state04{ background: url(../../image/insurebg1.png) no-repeat 0 0; background-size: 100% 80px; position: relative; padding: 22px 15px 18px;  color: #fff;background-color: #fff;}
			.vehicle_state05{ background: url(../../image/insurebg2.png) no-repeat 0 0; background-size: 100% 160px; position: relative; padding: 22px 15px 0;  color: #fff;background-color: #fff;}
			.color333{color:#333;}
			.pcolor333{color:#333; opacity:0.67;}
			
			.mt10 { margin-top:10px; }
			.mt30 { margin-top:30px; }
			.sk-three-bounce {
			  margin: 0 auto;
			  width: 80px;
			  text-align: center; }
			  .sk-three-bounce .sk-child {
				width: 13.5px;
				height: 13.5px;
				background-color: #3262F1;
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
						animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
			  .sk-three-bounce .sk-bounce1 {
				-webkit-animation-delay: -0.32s;
						animation-delay: -0.32s; }
			  .sk-three-bounce .sk-bounce2 {
				-webkit-animation-delay: -0.16s;
						animation-delay: -0.16s; }

			@-webkit-keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); } }

			@keyframes sk-three-bounce {
			  0%, 80%, 100% {
				-webkit-transform: scale(0);
						transform: scale(0); }
			  40% {
				-webkit-transform: scale(1);
						transform: scale(1); }
			}
			.showpdf { display: block; background-color:#fff; padding: 15px 15px 0; }
			.showpdf button { width:100%; border: 0.5px #3262F1 solid; border-radius: 4px; width: 100%; height: 50px; font-size: 15px; background-color:#fff; color:#3262F1;  }
			.showpdf button:active { background-color:#3262F1; color:#fff; opacity:0.5; }
			
			.showtitle { position: relative; width:100%; margin-top: 10px; text-align:center; background-color: #fff; margin-bottom:200px; }
			.showtitle span { position: relative; margin:0 auto;  font-size:15px; color:#3262F1; height:45px; line-height:45px; }
			.showtitle.on { margin-bottom:0; }
			.showtitle.on::after{ position: absolute; content: ""; left: 15px; right: 15px; bottom: 0; border-bottom: 1px #d4d4d4 solid; transform: scaleY(0.5);}
			.showtitle span i{ display:inline-block; vertical-align: top; height: 45px; line-height: 45px; padding-right: 15px; background-position: center right; background-repeat: no-repeat; background-size: 10px auto; background-image: url(../../image/img_44b.png);}
			.showtitle.on span i{ display:inline-block; vertical-align: top; height: 45px; line-height: 45px; padding-right: 15px; background-position: center right; background-repeat: no-repeat; background-size: 10px auto; background-image: url(../../image/img_44a.png);}
			.display-none { display:none; }
		</style>
	</head>
	<body>
		<div id="insuredetail">
		</div>
		<script id="insuredetail_template" type="text/template">
		<div class="vehicle_state{{? it.status > 1 && it.status != 4 && it.status != 6}} vehicle_state02{{??}} vehicle_state0{{=it.status}}{{?}}">
			{{? it.status == 1 && it.oldinsureid > 0}}
			<div class="m_cell_hd"><img src="../../image/insurestatus1a.png" alt="" /></div>
			{{??}}
			<div class="m_cell_hd"><img src="../../image/insurestatus{{=it.status}}.png" alt="" /></div>
			{{?}}
			<div class="m_cell_hd m_cell_primary">
				{{? it.status == 1}}
					{{? it.oldinsureid == 0}}
					<h4>车辆信息审核中</h4>
					<p>请耐心等待审核</p>
					{{??}}
					<h4>变更受益人申请审核中</h4>
					<p>请耐心等待审核</p>
					{{?}}
				{{?? it.status == 2}}
				<h4>车辆信息已通过，请支付保费</h4>
				<p>超过24小时未支付，本次申请自动失效</p>
				{{?? it.status == 3}}
				<h4>车辆联保生效中</h4>
				{{?? it.status == 4}}
				<h4>车辆联保未通过</h4>
				<p>原因：{{=it.reason}}</p>
				{{?? it.status == 5}}
				<h4 class="color333">车辆联保已到期</h4>
				<p class="pcolor333">到期日：{{=it.insureendtime}}</p>
				{{?? it.status == 6}}
				<h4 class="color333">车辆联保已取消</h4>
				{{?}}
			</div>
			{{? it.status != 4}}
			<div class="info">
				<b>联保单</b>
				<div class="baoxian_list">
					<ul>
						<li>
							<div>联保险种</div>
							<div>联保金额</div>
							<div>联保费用</div>
						</li>
						<li>
							<div>三者损失</div>
							<div><i class="on">{{=it.threebaofee}}万元</i></div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.threexianfee}}元{{?}}</div>
						</li>
						{{? it.qzxxian == 1}}
						<li>
							<div>车辆强制险</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.qzxbaofee}}万元{{?}}</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.qzxxianfee}}元{{?}}</div>
						</li>
						{{?}}
						{{? it.jdcxian == 1}}
						<li>
							<div>机动车损失</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.jdcbaofee}}万元{{?}}</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.jdcxianfee}}元{{?}}</div>
						</li>
						{{?}}
						{{? it.zrxian == 1}}
						<li>
							<div>自燃损失</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.zrbaofee}}万元{{?}}</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.zrxianfee}}元{{?}}</div>
						</li>
						{{?}}
						{{? it.dqxian == 1}}
						<li>
							<div>盗抢损失</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.dqbaofee}}万元{{?}}</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.dqxianfee}}元{{?}}</div>
						</li>
						{{?}}
						{{? it.jsyxian == 1}}
						<li>
							<div>驾驶员损失</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.jsybaofee}}万元{{?}}</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.jsyxianfee}}元{{?}}</div>
						</li>
						{{?}}
						{{? it.ckxian == 1}}
						<li>
							<div>乘客保障</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.ckbaofee}}万元{{?}}</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.ckxianfee}}元{{?}}</div>
						</li>
						{{?}}
						{{? it.hwxian == 1}}
						<li>
							<div>货物损失</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.hwbaofee}}万元{{?}}</div>
							<div>{{? it.status == 1}}<i>评估中</i>{{??}}{{=it.hwxianfee}}元{{?}}</div>
						</li>
						{{?}}
						{{? it.status > 1}}
						<li>
							<div style="text-align:left;">合计</div>
							<div>&nbsp;</div>
							<div style="text-align:right;font-size:20px;font-weight:500;">¥{{=it.allxianfee}}</div>
						</li>
						{{?}}
					</ul>
				</div>
			</div>
			{{?}}
		</div>
		{{? it.status == 3}}
		<div class="showpdf"><button class="" tapmode onclick="openpdf('{{=it.pdfurl}}')">查看电子保单</button></div>
		{{?}}
		{{? it.status == 2 || it.status == 3 || it.status == 5}}
		<div class="vehicle_time vehicle_time01">
			<b id="changtishi">联保有效期
			{{? it.status == 3}}
				{{? it.ischangeperson == 0}}
				<span tapmode onclick="openNavWin('#ddd','changeperson_win','changeperson_frm.html','申请变更受益人',false,false,true,[],{insureid:insureid});">申请变更受益人</span>
				{{??}}
				<span >变更受益人审核中</span>
				{{?}}
			{{?}}
			</b>
			<ul>
				<p><em></em><img src="../../image/img_38.png" alt="" />{{=it.insurestarttime}}</p>
				<p><img src="../../image/img_39.png" alt="" />{{=it.insureendtime}}</p>
			</ul>
		</div>
		{{?}}
		<div class="vehicle_info{{? it.status == 2 || it.status == 3 || it.status == 5}} mt10{{?}}">
		  <ul>
			<li>
					{{? it.usertype == 1}}<b>投保人</b>{{??}}<b>投保单位</b>{{?}}
					<p>{{=it.beneficiary}}</p>
				</li>
			<li>
					{{? it.usertype == 1}}<b>身份证号</b>{{??}}<b>统一社会信用代码照片</b>{{?}}
					<p>{{=it.idcard}}</p>
				</li>
			<li>
					<b>车牌号</b>
					<p>{{=it.carnum}}</p>
				</li>
			</ul>
		</div>
		<div class="showtitle" tapmode onclick="showimgs(this);"><span><em id="showtitle">展开证件信息</em><i></i></span></div>
		<div id="cardimgs" class="display-none">
		{{? it.usertype == 1}}
		<div class="identit_info identit_info01">
			<b>投保人身份证照片（正反面）</b>
			<ul class="clearfix">
				<li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb1}}" src="../../image/load.gif" tapmode /></li>
				<li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb2}}" src="../../image/load.gif" tapmode /></li>
			</ul>
		</div>
		{{??}}
		<div class="identit_info identit_info02">
			
			<b>统一社会信用代码照片</b>
			<ul class="clearfix">
				<li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb3}}" src="../../image/load.gif" tapmode /></li>
			</ul>
		</div>
		{{?}}
		{{? it.cartype == 1}}
		<div class="identit_info identit_info01"{{? it.status == 2}} style="padding-bottom:80px;"{{?}}>
			<b>车辆合格证照片</b>
		  <ul class="clearfix">
				<li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb11}}" src="../../image/load.gif" tapmode /></li>
			</ul>
		</div>
		{{??}}
		<div class="identit_info identit_info01"{{? it.status == 2}} style="padding-bottom:80px;"{{?}}>
			<b>联保车辆行驶副本照片</b>
		  <ul class="clearfix">
				<li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb6}}" src="../../image/load.gif" tapmode /></li>
				<li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb7}}" src="../../image/load.gif" tapmode /></li>
			</ul>
		</div>
		{{?}}
		</div>
		<!-- <div class="identit_info identit_info01"> -->
			<!-- <b>车辆强制保险保单照片</b> -->
		  <!-- <ul class="clearfix"> -->
				<!-- <li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb4}}" src="../../image/load.gif" tapmode /></li> -->
			<!-- </ul> -->
		<!-- </div> -->

		

		<!-- <div class="identit_info identit_info01"{{? it.status == 2}} style="padding-bottom:80px;"{{?}}> -->
			<!-- <b>车辆照片</b> -->
		  <!-- <ul class="clearfix"> -->
				<!-- <li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb8}}" src="../../image/load.gif" tapmode /></li> -->
				<!-- <li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb9}}" src="../../image/load.gif" tapmode /></li> -->
				<!-- <li><img onload="fnLoadImage(this)" tapmode onclick="fnOpen(this);" class="loadimg" data-url="{{=it.cardIDthumb10}}" src="../../image/load.gif" tapmode /></li> -->
			<!-- </ul> -->
		<!-- </div> -->
		<!--车辆联保end-->
		{{? it.status == 2}}
		<div class="s_fix">

			<button class="d_btn" id="login-btn" tapmode="btnpress" onclick="selaction({{=it.allfee}});">支付¥{{=it.allfee}}</button>
		</div>
		{{?}}
		</script>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
	<script type="text/javascript" src="../../script/doT.js"></script>
	<script type="text/javascript">
		var insureid;
		var photoBrowser;
		var imgs;
		var openimged = 0;
		var UILoading;
		apiready = function() {
			api.parseTapmode();
			UILoading = api.require('UILoading');
			photoBrowser = api.require('photoBrowser');
			showloading();
			insureid = api.pageParam.insureid;
			getJsonFromAPI();
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				if(openimged == 1) {
					openimged = 0;
					photoBrowser.close();
				}
				else
				{
					api.closeWin({
					});
				}
			});
			api.addEventListener({
                name: 'navitembtn'
            }, function(ret, err) {
                if (ret.type == 'left') {
					api.closeWin({
					});
                }
            });
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				getJsonFromAPI();				
			});
		}
		function openpdf(pdfurl) {
			if(pdfurl == '') 
			{
				toast('暂未生成保单，请稍后再试');
				return false;
			}
			var pdfReader = api.require('pdfReader');
			pdfReader.open({
				path: pdfurl,
				hidden:{
				  print: true,           
				  export: true,          
				  bookmark: true,         
				  email: true           
				},
				androidHidden:{
					topBackButton: false
				}
			});
		}
		function showimgs(obj) {
			$api.toggleCls(obj,'on');
			if($api.hasCls(obj,'on')) {
				$api.text($api.byId('showtitle'),'收起证件信息');
			}
			else
			{
				$api.text($api.byId('showtitle'),'展开证件信息');
			}
			$api.toggleCls($api.byId('cardimgs'),'display-none');
		}
		function changetishi() {
			$api.html($api.byId('changtishi'),"<span>变更受益人审核中</span>");
		}
		function selaction(paymoney) {
			//选择按钮组
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					
					if(userinfo.status!=1){
						tipbox(userinfo.status);
						return;
					}
					api.openFrame({
						name: 'payactionsheet_frm',
						url: '../public/payactionsheet_frm.html',
						bounces: false,
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						},
						bgColor: 'rgba(0,0,0,0.7)',
						pageParam: {
							fromfrm: 'insure',
							paymoney: paymoney,
							tradeid: insureid,
							ordertype: 2
							
						}
					});	
				}
			});
			
		}
		function fnLoadImage(obj) {
			obj.onload = null;
			var dataUrl = $api.attr(obj, 'data-url');
			if(dataUrl!=''){
				api.imageCache({
					url: dataUrl
				}, function(ret, err) {
					if(ret && ret.status == true){
						obj.src = ret.url;
						setTimeout(function(){
							$api.removeCls(obj,'loadimg');
						}, 100);
					}
				});
			}
		}
		function fnOpen(obj) {
			openimged = 1;
			console.log(JSON.stringify(imgs));
			var imgurl = $api.attr(obj,'data-url');
			photoBrowser.open({
					images: [imgurl],
					activeIndex: 0,
					//placeholderImg: 'widget://image/apicloud.png',
					bgColor: '#000'
			}, function(ret) {
				if (ret.eventType == 'click') {
					photoBrowser.close();
					openimged = 0;
				}
			});
        }
		function getJsonFromAPI() {
			//从接口获取查询数据
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/insuredetail/'+insureid,
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						hideloading();
						if (ret) {
							console.log(JSON.stringify(ret.insure));
							var insuredetail = ret.insure;
							
							UpdateList('insuredetail','insuredetail_template',insuredetail);
							

						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								toast('网络异常');
								console.log(JSON.stringify(err));
							}
						}
					});
				}
			});
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata) {
			var act_content = $api.byId(domId);
			var tempFn = doT.template($api.byId(templateId).innerHTML);
			var resultText = tempFn(jsondata);
			$api.html(act_content, resultText);
			api.parseTapmode();
			
			
		}
	</script>
</html>